<!--  -->
<template>
    <div class="view-page">
        <section class="page-head">
            <div class="head-info">
                <div class="pdp_info">
                    <div class="pdp_img_box">
                        <img class="pdp_img" :src="charityContentInfo.cover || ''" alt="">
                    </div>
                    <div class="pdp_data">
                        <h1 class="pdp_title">{{ charityContentInfo.title || '' }}</h1>
                        <div class="pdp-content__description">{{ charityContentInfo.subTitle || '' }}</div>
                        <button class="pdp-content__btn" @click="toDownload">Let Love Spread</button>
                    </div>
                </div>
            </div>
        </section>
        <div class="content-box">
            <img class="content-bg" src="../../assets/images/bounty/pattern.png" alt="">
            <div class="content">
                <div v-html="charityContentInfo.content"></div>
            </div>
        </div>

    </div>
</template>

<script>
import { selectCharityContentInfo } from "@/config/api";
export default {
    data() {
        return {
            charityContentInfo: {},
        };
    },
    mounted() { },
    created() {
        console.log(this.$route.query.id);
        selectCharityContentInfo(this.$route.query.id).then((res) => {
            console.log(res);
            if (res.code === 200) {
                this.charityContentInfo = res.data;
            }
        });
    },
    methods: {
      toDownload(){
        this.$router.push({
          path: '/download',
        });
        // window.location.href = "/download";
      }
    },
};
</script>
<style lang="less" scoped>
.page-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 345px;
    padding: 50px 0;

    .head-info {
        max-width: 1400px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .pdp_info {
        width: 100%;
        max-width: 1400px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        grid-gap: 80px;
        gap: 80px;

        .pdp_img_box {
            width: calc(50% - 40px);
            display: flex;
            align-items: center;
            justify-content: center;

            .pdp_img {
                height: auto;
                width: 100%;
                border-radius: 6px;
                box-shadow: 5px 5px 20px 0px rgba(0, 18, 87, 0.1);
                border-radius: 20px;
                max-width: 535px;
                max-height: 350px;
                -o-object-fit: cover;
                object-fit: cover;
            }
        }

        .pdp_data {
            width: calc(50% - 40px);

            .pdp_title {
                font-size: 40px;
                letter-spacing: -0.27px;
                line-height: 34px;
                font-family: sofia-pro;
                font-style: normal;
                font-weight: 500;
                text-decoration: none;
                margin: 0 0 11px;
                color: #001936;
            }

            .pdp-content__description {
                font-size: 18px;
                font-style: normal;
                font-weight: 500;
                letter-spacing: -0.27px;
                line-height: 22px;
                margin-top: 25px;
            }

            .pdp-content__btn {
                margin-top: 30px;
                background-color: #355ffe;
                color: white;
                border: none;
                font-weight: 700;
                font-size: 16px;
                padding: 10px 20px;
                border-radius: 6px;
                cursor: pointer;
                transition: background-color 0.3s ease;
                min-width: 280px;
            }

            .pdp-content__btn:hover {
                /*  background-color: #6a8324; **/
                background-color: rgba(53, 95, 254, 0.8);
            }
        }
    }
}

.content-box {
    background: #f7f5f3;
    width: 100%;
    position: relative;
    min-height: 300px;
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;

    .content-bg {
        position: absolute;
        top: 0;
        right: 0;
        width: 150px;
        height: 180px;
    }

    .content {
        width: 100%;
        padding: 20px 100px;
        padding-bottom: 50px;
        box-sizing: border-box;
        max-width: 1290px;
    }
}
</style>